import React, {useState} from "react";
import {User, Project} from "../../types";
import {Form, Input, Select} from "antd";

interface SeachPanelProps {
	users: User[],
	param?: Partial<Pick<Project, 'name' | 'personId'>>
	setParam?: (param: SeachPanelProps["param"]) => void
}

export const SearchPanel = (props: SeachPanelProps) => {
	const [param, setParam] = useState({name: '', personId: ''})
	return <Form>
		<Form.Item>
			<input value={param.name} onChange={evt => setParam({...param, name: evt.target.value})}/>
		</Form.Item>
		<Form.Item>
			<select value={param.personId} onChange={evt => setParam({...param, personId: evt.target.value})}>
				<option value={''}>负责人</option>
				{
					props.users.map(user => <option value={user.id}>{user.name}</option>)
				}
			</select>
		</Form.Item>
	</Form>
}
